<template>
	<view class="wodetail" @click="hideModal">
		<view class="ag-topbg"></view>
		<view class="wodetail-card">
			<view class="wodetail-card__head">
				<view class="ag-womarker">{{ firstChar(orderDetailData.WoType) }}</view>
				<view class="wodetail-card__col">
					<view class="wodetail-card__col-row">
						<text class="wodetail-card__name">{{ orderDetailData.WoType }}</text>
						<view class="ag-status-tag ag-status-tag--error">
							<text>{{ orderDetailData.OrderStatusName }}</text>
						</view>
						<view class="wodetail-card__no">{{ orderDetailData.WoNum }}</view>
					</view>
					<view class="wodetail-card__col-time">
						<text>总部派工：{{ orderDetailData.AssignDate }}</text>
						<text>网点派工：{{ orderDetailData.ServiceSiteAcceptDate }}</text>
					</view>
				</view>
			</view>
			<view class="wodetail-card__divider"></view>
			<view class="wodetail-card__body">
				<view class="ag-cellgroup">
					<view class="ag-cell">
						<view class="ag-cell__label">
							<image mode="widthFix" src="../../static/img/icon-user.png" />
						</view>
						<view class="ag-cell__value">
							<text>{{ orderDetailData.ContactName }}</text>
						</view>
					</view>
					<view class="ag-cell">
						<view class="ag-cell__label">
							<image mode="widthFix" src="../../static/img/icon-phone.png" />
						</view>
						<view class="ag-cell__value" :data-phone="orderDetailData.ContactMobile" @click="phoneCall">
							<text class="ag-color-primary">{{ orderDetailData.ContactMobile }}</text>
							<!-- <text class="ag-color-primary">{{orderDetailData.Street}}</text> -->
						</view>
					</view>
				</view>
				<view class="ag-cellgroup">
					<view class="ag-cell">
						<view class="ag-cell__label">
							<image mode="widthFix" src="../../static/img/icon-phone.png" />
						</view>
						<view class="ag-cell__value" :data-phone="orderDetailData.ContactTelephone" @click="phoneCall">
							<text class="ag-color-primary">{{ orderDetailData.ContactTelephone }}</text>
							<!-- <text class="ag-color-primary">{{orderDetailData.Street}}</text> -->
						</view>
					</view>
					<view class="ag-cell">
						<view class="ag-cell__label">
							<image mode="widthFix" src="../../static/img/icon-phone.png" />
						</view>
						<view class="ag-cell__value" :data-phone="orderDetailData.MobilePhone1" @click="phoneCall">
							<text class="ag-color-primary">{{ orderDetailData.MobilePhone1 }}</text>
							<!-- <text class="ag-color-primary">{{orderDetailData.Street}}</text> -->
						</view>
					</view>
				</view>
				<view class="ag-cell">
					<view class="ag-cell__label">
						<image mode="widthFix" src="../../static/img/icon-location.png" />
					</view>
					<view class="ag-cell__value" @click="openAddressMap">
						<text>{{ orderDetailData.DisplayAdress }}</text>
					</view>
				</view>
			</view>
			<view class="wodetail-card__content1">
				<view class="ag-cellgroup">
					<view class="ag-cell">
						<view class="ag-cell__label"><text>有效催单:</text></view>
						<view class="ag-cell__value">
							<text>{{ orderDetailData.ReminderTimes }}次</text>
						</view>
					</view>
					<view class="ag-cell">
						<view class="ag-cell__label"><text>待处理催单:</text></view>
						<view class="ag-cell__value">
							<text>{{ orderDetailData.LeftReminderTimes }}次</text>
						</view>
					</view>
				</view>
				<view class="ag-cell">
					<view class="ag-cell__label"><text>客户自购件:</text></view>
					<view class="ag-cell__value">
						<text>{{ orderDetailData.IsSincePurchase ? '是' : '否' }}</text>
					</view>
				</view>
				<view class="ag-cell">
					<view class="ag-cell__label"><text>预约上门时间:</text></view>
					<view class="ag-cell__value">
						<text>{{ orderDetailData.AppointmentDateTime }}</text>
					</view>
				</view>
				<view class="ag-cell">
					<view class="ag-cell__label"><text>来电内容:</text></view>
					<view class="ag-cell__value">
						<text>{{ orderDetailData.PhonecallContent }}</text>
					</view>
				</view>
				<view class="ag-cell">
					<view class="ag-cell__label"><text>工单备注:</text></view>
					<view class="ag-cell__value">
						<text>{{ orderDetailData.WORemark }}</text>
					</view>
				</view>
				<view class="ag-cell">
					<view class="ag-cell__label"><text>二线备注:</text></view>
					<view class="ag-cell__value">
						<text>{{ orderDetailData.SecondLineRemark }}</text>
					</view>
				</view>
			</view>
			<view class="wodetail-card__content2" v-for="(productItem, index) in orderDetailData.WoProuduct" :key="productItem.ProuctId">
				<view class="ag-cell">
					<view class="ag-cell__label"><text>编码:</text></view>
					<view class="ag-cell__value">
						<text>{{ productItem.ProductNum }}</text>
					</view>
				</view>
				<view class="ag-cell">
					<view class="ag-cell__label"><text>名称:</text></view>
					<view class="ag-cell__value">
						<text>{{ productItem.ProductName }}</text>
					</view>
				</view>
				<view class="ag-cell">
					<view class="ag-cell__label"><text>物流码:</text></view>
					<view class="ag-cell__value">
						<text>{{ productItem.Barcode }}</text>
					</view>
				</view>
				<view class="ag-cell">
					<view class="ag-cell__label"><text>物流码有效性:</text></view>
					<view class="ag-cell__value">
						<text>{{ productItem.IsSerialValid }}</text>
					</view>
				</view>
				<view class="ag-cellgroup">
					<view class="ag-cell">
						<view class="ag-cell__label"><text>购机来源:</text></view>
						<view class="ag-cell__value">
							<text>{{ productItem.PurchaseSourceText }}</text>
						</view>
					</view>
					<view class="ag-cell">
						<view class="ag-cell__label"><text>购机日期:</text></view>
						<view class="ag-cell__value">
							<text>{{ productItem.PurchaseDate | GetDate}}</text>
						</view>
					</view>
				</view>
				<view class="ag-cell">
					<view class="ag-cell__label"><text>安装位置:</text></view>
					<view class="ag-cell__value">
						<text>{{ productItem.InstallLocation }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="wodetail-section" v-if="orderDetailData && orderDetailData.WoItemPicture.length > 0">
			<view class="wodetail-section__head">
				<view>现场图片</view>
				<!-- <navigator url="../../woupload/index"><text>查看全部</text></navigator> -->
			</view>
			<ListImage :woitempicture="orderDetailData.WoItemPicture" />
		</view>
		<view class="wodetail-section">
			<view class="wodetail-section__head">
				<view>服务历程</view>
				<navigator :url="'../../pages/woprogress/index?orderDetailId=' + orderDetailId"><text>查看全部</text></navigator>
			</view>
			<block v-for="(woServiceItem, oindex) in orderDetailData.WoServiceHistory" :key="woServiceItem.WoHistoryId">
				<ListProcess :WoHistoryId="woServiceItem.WoHistoryId" :WoTransTypeName="woServiceItem.WoTransTypeName" :WoTransType="woServiceItem.WoTransType"
				 :WoTransDate="woTransDateFomart(woServiceItem.WoTransDate)" :RelatedUserName="woServiceItem.RelatedUserName" />
			</block>
		</view>
		<view class="wodetail-footer" v-if="!prodEnv || 
		(orderDetailData.WoFinishType==1 || orderDetailData.WoFinishType==2 || orderDetailData.WoFinishType==3)">
			<button v-if="btnDisplayConf.IsShowAcceptorderBtn" class="cu-btn lg primary" @click="onAcceptorderClick">接单</button>
			<button v-if="btnDisplayConf.IsShowReservationBtn" class="cu-btn lg primary" @tap="onReservationClick">预约</button>
			<button v-if="btnDisplayConf.IsShowVisitBtn" class="cu-btn lg primary" @click="onVisitClick">上门</button>
			<!-- <button v-if="btnDisplayConf.IsShowReCompleteBtn" class="cu-btn lg primary">重新完工</button>
			<button v-if="btnDisplayConf.IsShowEvaluateBtn" class="cu-btn lg primary">评价</button> -->
			<button @click.stop="showMore = !showMore" class="cu-btn lg primary">
				更多
				<text :class="[showMore ? 'ag-triangle-up' : 'ag-triangle-down']"></text>
				<view class="tui-drawer-container" :class="['wodetail__more', showMore && 'show']">
					<view v-if="btnDisplayConf.isShowProcessReminderBtn" data-type="ProcessReminder" @click.stop="moreButtonClick">催单处理</view>
					<view v-if="btnDisplayConf.isShowCreateAssemblyBomBtn" data-type="CreateAssemblyBom" @click.stop="moreButtonClick">生成配件行</view>
					<view v-if="btnDisplayConf.isShowUpdateOrderBtn" data-type="UpdateOrder" @click.stop="moreButtonClick">更新工单</view>
					<view v-if="btnDisplayConf.isShowReworkBtn" data-type="Rework" @click.stop="moreButtonClick">返工</view>
					<view v-if="btnDisplayConf.IsShowCompleteBtn" data-type="CompleteOrder" @click.stop="moreButtonClick">完工</view>
					<view v-if="btnDisplayConf.isShowConsultingDoneBtn" data-type="ConsultingDone" @click.stop="moreButtonClick">咨询完工</view>
				</view><!--  -->
			</button>
		</view>

		<ReservationPoPup ref="reservationPoPup" :orderDetailData="orderDetailData" @onSubmitReservation="onSubmitReservation" />
		<VisitPoPup ref="visitPoPup" :orderDetailData="orderDetailData" :orderVisitData="VisitData" @onVisit="onSubmitVisit"
		 @changeMilestone="onChangeMilestone" @changeStreet="onChangeStreet" />
		<consultEndPopup ref="consultEndPopup" :IsShowMaintainInfo="IsShowMaintainInfo" :WoId="orderDetailId" @onConsultEndSubmit="onConsultEndSubmit" />
		<upWorderPopup ref="upWorderPopup" :AccountName="orderDetailData.ContactName" :ContactPhone="orderDetailData.MobilePhone1"
		 :Address="orderDetailData.Street" @ChangeUpWOAccountName="onChangeUpWOAccountName" @ChangeUpWOAddress="onChangeUpWOAddress"
		 @ChangeUpWOContactPhone="onChangeUpWOContactPhone" @UpWorderSubmit="onUpWorderSubmit" />
		<warnOrderPopup ref="warnOrderPopup" :AccountName="orderDetailData.ContactName" :ContactPhone="orderDetailData.ContactMobile"
		 :Address="orderDetailData.DisplayAdress" @WarnOrderSubmit="onWarnOrderSubmit" />
		<reworkPopup ref="reworkPopup" @onReworkSubmit="onReworkSubmit" <!-- /> -->
	</view>
</template>
<script>
	import consultEndPopup from '@/components/ConsultEndPopup';
	import upWorderPopup from '@/components/UpWorderPopup';
	import warnOrderPopup from '@/components/WarnOrderPopup';
	import reworkPopup from '@/components/ReworkPopup';
	import ReservationPoPup from '../../components/ReservationPoPup';
	import VisitPoPup from '../../components/VisitPoPup';
	import ListProcess from '../../components/ListProcess';
	import ListImage from '../../components/ListImage';
	import AGInput from '../../components/AGInput';
	import Utils from '../../common/utils';
	import yuDatetimePicker from '@/components/yu-datetime-picker/yu-datetime-picker.vue';
	import wodetailbehavior from './wodetailbehavior';
	import permissionCommon from '@/common/permissionCommon';

	export default {
		mixins: [wodetailbehavior, permissionCommon],
		components: {
			upWorderPopup,
			warnOrderPopup,
			reworkPopup,
			consultEndPopup,
			ReservationPoPup,
			VisitPoPup,
			ListProcess,
			ListImage,
			AGInput,
			yuDatetimePicker
		},
		data() {
			return {
				orderDetailId: '',
				orderDetailData: {},
				orderDetailStatusType: '',
				showMore: false,
				reservationTime: '',
				reservationRemark: '',
				currentTime: Utils.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'),
				vitisRemark: '',

				//经度
				currentLongitude: 0,
				//纬度
				currentLatitude: 0,
				//当前用户定位地址
				userPosition: '',
				//客户的经纬度
				accountLongitude: 0,
				accountLatitude: 0,

				//距离-公里
				distance: 0,

				//定位是否成功
				IsLocationSuccess: false,
				//功能按钮显示控制
				btnDisplayConf: {},
				//上门定位
				VisitData: {
					Milestone: 0,
					Location: '',
					currentLongitude: 0,
					currentLatitude: 0,
					accountLongitude: 0,
					accountLatitude: 0
				},
				//咨询完工弹窗
				IsShowMaintainInfo: false
			};
		},
		computed: {
			prodEnv() {
				return this.$ENV.prodEnv;
			}
		},
		filters: {
			//获取日期
			GetDate(value) {
				if (value) {
					var date = value.replace(/-/g, '/')
					let result = Utils.formatDate(new Date(date), 'yyyy/MM/dd');
					return result;
				}
				return '';
			},

		},
		watch: {
			//监视公里数是否发生变化
			// 'VisitData.Milestone': {
			// 	handler(newval, oldval) {
			// 		if (newval != oldval)
			// 			this.VisitData.Milestone = newval;
			// 	},
			// 	immediate: true,

			// },
			//功能按钮显示控制
			orderDetailData(val) {
				this.btnDisplayConf = this.WoDetailsShowBtn(val);
				//console.log(this.btnDisplayConf);
			}
		},
		onLoad: function(option) {
			this.orderDetailId = option.orderDetailId;
			console.log(this.orderDetailId);
			//包含部分服务历程
			this.onLoadData();

			//工单的服务历程-全部
			// this.GetOrderServiceTraceData(userPhone, this.orderDetailId, this.UserInfo.RetId);
		},
		onPullDownRefresh(e) {
			uni.showLoading({
				title: '加载中。。',
				mask: true
			});
			uni.showNavigationBarLoading();
			this.orderDetailData = {};
			let hideMyLoading = () => {
				uni.stopPullDownRefresh();
				uni.hideLoading();
				uni.hideNavigationBarLoading();
			};
			this.GetOrderDetailData(this.orderDetailId, hideMyLoading);
		},
		onUnload(event) {
			uni.$emit("ReLoadWorder");
		},
		methods: {
			//加载数据
			onLoadData() {
				uni.showLoading({
					mask: true,
					title: '加载中..'
				});
				this.orderDetailData = {};
				this.GetOrderDetailData(this.orderDetailId);
			},

			//拨打电话
			phoneCall(e) {
				let phone = e.currentTarget.dataset.phone;
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			//打开地图控件
			async openAddressMap(e) {
				// let token = this.UserInfo.RetId;
				let locationMap = await this.getAddressMapAsync(this.orderDetailData.DisplayAdress);
				//console.log(locationMap);

				uni.openLocation({
					latitude: locationMap.result.location.lat,
					longitude: locationMap.result.location.lng,
					success: function() {
						console.log('success');
					}
				});
			},
			onChangeMilestone(e) {
				this.VisitData.Milestone = e;
				console.log(e);
			},
			onChangeStreet(e) {
				this.orderDetailData.Street = e;
				console.log(e);
			},

			moreButtonClick(e) {
				console.log(e);
				let type = e.target.dataset.type;
				let woGUID = this.orderDetailData.WoId;
				if (type == 'CreateAssemblyBom') {
					//生成配件行
					this.CreateAssemblyBom(woGUID);
				} else if (type == 'ProcessReminder') {
					//催单处理
					console.log('催单处理');
					this.$refs.warnOrderPopup.openPoPup();
				} else if (type == 'ConsultingDone') {
					//咨询完工
					console.log('咨询完工');
					this.IsShowMaintainInfo = this.orderDetailData.WoFinishType == 3 ? true : false;
					this.$refs.consultEndPopup.openPoPup();
				} else if (type == 'Rework') {
					//返工
					console.log(this.$refs);
					this.$refs.reworkPopup.openPoPup();
				} else if (type == 'UpdateOrder') {
					//更新完工
					this.$refs.upWorderPopup.openPoPup();
				} else if (type == 'CompleteOrder') {
					//完工
					this.GoToPage(this.orderDetailData.WoFinishType, this.orderDetailId);
				}
				this.showMore = false;
			},

			hideModal: function() {
				if (this.showMore) {
					this.showMore = false;
				}
			},

			//更新工单组件的客户名称Change事件
			onChangeUpWOAccountName(e) {
				console.log(e);
				this.orderDetailData.ContactName = e;
			},
			//更新工单组件的客户地址Change事件
			onChangeUpWOAddress(e) {
				console.log(e);
				this.orderDetailData.Street = e;
			},
			//更新工单组件的客户电话Change事件
			onChangeUpWOContactPhone(e) {
				console.log(e);
				this.orderDetailData.MobilePhone1 = e;
			},

			//更新工单提交按钮
			onUpWorderSubmit(parm) {
				uni.showLoading({
					mask: true,
					title: '提交中..'
				});
				let UpdateOrderData = {};
				UpdateOrderData.UserId = this.UserInfo.mobile;
				UpdateOrderData.WOGUID = this.orderDetailId;
				UpdateOrderData.Remark = parm.Remark;
				UpdateOrderData.ReasonCodeId = parm.ReasonId;
				UpdateOrderData.AccountName = this.orderDetailData.ContactName;
				UpdateOrderData.Mobilephone = this.orderDetailData.ContactPhone;
				UpdateOrderData.Mobilephone2 = this.orderDetailData.MobilePhone1;
				UpdateOrderData.Telephone = this.orderDetailData.ContactTelephone;
				UpdateOrderData.Street = this.orderDetailData.Street;
				this.WOUpdateOrderAsync(UpdateOrderData, this.UserInfo.RetId);
			},

			//接单
			onAcceptorderClick(e) {
				uni.showLoading({
					title: '接单中..',
					mask: true
				});
				this.AcceptorderAsync(this.orderDetailData.WoId);
			},
			//打开预约
			onReservationClick(e) {
				//debugger;
				this.$refs.reservationPoPup.openPoPup();
			},

			//打开上门
			onVisitClick(e) {
				//清空上门信息-触发上门组件的监控事件
				this.resetVisiData();

				this.VisitPoPupOpen();
				this.GetUserLocation();
			},

			resetVisiData() {
				this.VisitData.currentLongitude = '';
				this.VisitData.currentLatitude = '';
				this.VisitData.Location = '';
				this.VisitData.accountLongitude = '';
				this.VisitData.accountLatitude = '';
			},

			//预约提交按钮
			async onSubmitReservation(e) {
				uni.showLoading({
					mask: true,
					title: '提交中..'
				});
				if (e.reservationTime && e.ReasonCodeId) {
					this.OrderReservationAsync(e.reservationTime, e.reservationRemark, e.ReasonCodeId);
				} else {
					uni.hideLoading();
					uni.showToast({
						title: '请填写预约时间与预约原因',
						icon: 'none'
					});
				}
			},

			//上门提交按钮
			onSubmitVisit(e) {
				console.log(this.orderDetailData);
				console.log(this.VisitData);
				console.log(e);
				let VisitSubmitData = {};
				VisitSubmitData.UserId = this.UserInfo.mobile;
				VisitSubmitData.WOGUID = this.orderDetailData.WoId;
				VisitSubmitData.Longitude = this.VisitData.accountLongitude;
				VisitSubmitData.Latitude = this.VisitData.accountLatitude;
				VisitSubmitData.Location = this.VisitData.Location;
				VisitSubmitData.NewAddress = this.orderDetailData.Street;
				VisitSubmitData.Milestone = this.VisitData.Milestone;
				VisitSubmitData.IsLocationSuccess = this.VisitData.IsLocationSuccess;
				VisitSubmitData.Remark = e.vitisRemark;
				uni.showLoading({
					mask: true,
					title: '提交中..'
				});
				if (VisitSubmitData.IsLocationSuccess == true) {
					if (VisitSubmitData.Milestone != 0 && VisitSubmitData.NewAddress != '') {
						this.WoFieldServiceAsync(VisitSubmitData, this.UserInfo.RetId);
					} else {
						uni.hideLoading();
						uni.showToast({
							title: '请填写更正地址与上门里程',
							icon: 'none'
						});
					}
				} else {
					uni.hideLoading();
					uni.showToast({
						title: '定位失败，无法计算里程，无法上门',
						icon: 'none'
					});
					this.$refs.visitPoPup.closePoPup();
				}
			},

			//催单处理提交按钮
			onWarnOrderSubmit(parm) {
				uni.showLoading({
					mask: true,
					title: '催单中..'
				});
				console.log(parm.Remark);
				this.WOPushAsync(parm.Remark);
			},

			woTransDateFomart(woTransDate) {
				if (woTransDate) return Utils.formatDate(new Date(woTransDate), 'yyyy/MM/dd hh:mm:ss');
				else return '';
			},

			firstChar: function(str) {
				if (str) return str.charAt(0);
				else return '';
			},

			//关闭上门
			// onVisitPoPupClose() {
			// 	this.$refs.visitPoPup.closePoPup();
			// },

			//关闭预约
			// onReservationPoPupClose() {
			// 	this.$refs.reservationPoPup.close();
			// },

			// //预约
			// async onReservation() {
			// 	let ReasonCodeData = await this.ReasonCodeListAsync(this.UserInfo.mobile, 5, this.UserInfo.RetId);
			// 	if (ReasonCodeData) {
			// 		let ReasonCodeId = ReasonCodeData[0].ReasonCodeId;
			// 		this.OrderReservationAsync(this.UserInfo.mobile, this.orderDetailId, this.reservationTime, this.reservationRemark,
			// 			ReasonCodeId, this.UserInfo.RetId);
			// 	}
			// },
			//返工提交按钮
			onReworkSubmit(e) {
				uni.showLoading({
					mask: true,
					title: '提交中..'
				});
				this.ReworkAsync(e.Remark, e.ReasonId);
			},
			//咨询完工提交按钮
			onConsultEndSubmit(e) {
				uni.showLoading({
					mask: true,
					title: '提交中..'
				});
				let ConsultEndData = {
					UserId: this.UserInfo.mobile,
					WOGUID: this.orderDetailId,
					Remark: e.Remark,
					ReasonCodeId: e.ReasonID,
					IsDelayRemainder: e.IsDelayRemainder,
					DelayToNextTime: e.DelayToNextTime,
					DelayDateUnit: e.DelayDateUnit,
					DelayDate: e.DelayDate
				};
				this.ConsultEndAsync(ConsultEndData);
			}
		}
	};
</script>
<style lang="scss">
	@import './index.scss';
</style>
